﻿var table = (function () {
    var defaults = {
        cols: ['流水号', '接车地址', '时间', '原因'],
        cols_key: ['LSH', 'JCDZ', 'CREATE_TIME', 'REMARK'],
        data: [],
        readOnly: false,
        initFinished: function (options) {
            console.log('init:' + options)
        },
        del: function (index) {
            console.log('del:' + index)
        },
        add: function (index) {
            console.log('add:' + index)
        },
        commit: function (index) {
            console.log(this)
            console.log('commit:' + index)
        }
    }
    var rightIcon = '<div class="rightIcon"><span class="edit" data-index="{index}">编辑</span><span class="del" data-index="{index}">删除</span></div>'
    var rightIcon2 = '<div class="rightIcon"><span class="commit" data-index="{index}">完成</span><span class="del" data-index="{index}">删除</span></div>'
    var TableEdit = function (el, options) {
        this.$el = $(el);
        this.tbody = this.$el.find('.tbody');
        this.opts = options;
        this.colsNumb = options.cols.length;
        this.rowsNumb = options.data.length;
    }

    TableEdit.prototype.init = function () {
        for (var i in this.opts.data) {
            var item_arr = []
            for (var j in this.opts.cols_key) {
                item_arr.push(this.opts.data[i][this.opts.cols_key[j]])
            }
            this.tbody.append('<tr><td><span class="text">' + item_arr.join('</span></td><td><span class="text">') + '</span>' + rightIcon.replace(/{index}/g, i) + '</td></tr>')
        }
        if (!this.opts.readOnly) {
            this.bindEvent();
        }

        (typeof this.opts.initFinished == 'function') && this.opts.initFinished(this.opts);

        this.$el.trigger('initFinished', [this.opts])
    }

    TableEdit.prototype.bindEvent = function () {
        var self = this
        self.$el.on('click', '.add', function () {
            var html_arr = []
            for (var i in self.opts.cols) {
                html_arr.push('<input tepe="text" placeholder="' + self.opts.cols[i] + '"  />')
            }

            self.tbody.append('<tr><td><span class="text">' + html_arr.join('</span></td><td><span class="text">') + '</span>' + rightIcon2.replace(/{index}/g, self.rowsNumb) + '</td></tr>')

            self.rowsNumb++


            (typeof self.opts.add == 'function') && self.opts.add.call(this, self.rowsNumb);

            self.$el.trigger('add', [self.rowsNumb])
        })

        self.$el.on('click', 'td .edit', function () {
            var index = $(this).parents('tr').index()
            var $tri = self.tbody.find('tr').eq(index)
            $tri.find('td').each(function () {
                var $text = $(this).find('.text')
                var $val = $text.text()
                $text.html('<input tepe="text" value="' + $val + '"  />')
            })

            $(this).removeClass('edit').addClass('commit').text('完成');

            (typeof self.opts.edit == 'function') && self.opts.edit.call(this, index);

            self.$el.trigger('edit', [index])
        })

        self.$el.on('click', 'td .commit', function () {
            var index = $(this).parents('tr').index()
            var $tri = self.tbody.find('tr').eq(index)
            $tri.find('td').each(function () {
                var $text = $(this).find('.text')
                var $val = $text.find('input').val()
                $text.html($val)
            })
            $(this).removeClass('commit').addClass('edit').text('编辑');

            (typeof self.opts.commit == 'function') && self.opts.commit.call(this, index);

            self.$el.trigger('commit', [index])
        })

        self.$el.on('click', 'td .del', function () {
            var index = $(this).parents('tr').index()
            var $tri = self.tbody.find('tr').eq(index)
            $tri.remove();
            self.rowsNumb--;

            (typeof self.opts.del == 'function') && self.opts.del.call(this, index);

            self.$el.trigger('del', [index])
        })
    }

    var init = function (el, options) {
        options = $.extend({}, defaults, options);
        new TableEdit(el, options).init()
    };

    var getData = function (el, options, index) {
        var result = []
        var doc = {}
        if (index) {
            index = parseInt(index)
            doc = $(el).find('.tbody tr').eq(index)
        }
        else {
            doc = $(el).find('.tbody tr')
        }

        doc.each(function () {
            var obj = {}
            for (var i in options.cols_key) {
                var $text = $(this).find('td').eq(i).find('.text')
                if ($text.find('input').length) {
                    obj[options.cols_key[i]] = $text.find('input').val()
                } else {
                    obj[options.cols_key[i]] = $text.text()
                }
            }
            result.push(obj)
        })
        return result
    };

    $.fn.extend({
        table: function (options) {
            return this.each(function () {
                init(this, options)
            })
        },
        tableData: function (options, index) {
            return getData(this, options, index)
        }
    })

    return {
        init: init
    }
})();
